<!--
 * @FilePath: SwiperModify.vue
 * @Author: jack
 * @Date: 2024-05-29 08:56:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-22 14:10:34
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="swiperModify">
        <div class="swiperBox">
            <Swiper :modules="modules" ref="SwiperRef" :loop="props.swiperList.length >= 3 ? true : false"
                :autoplay="false" :spaceBetween="-370" :slidesPerView="props.swiperList.length >= 3 ? 2 : 2"
                :centeredSlides="true" :observer="true" :observeParents="true" class="swiper-container"
                @slideChangeTransitionEnd="handleSlideChange">
                <swiper-slide v-for="(item, index) in props.swiperList" :index="index" :key="index">
                    <img :src="item" />
                </swiper-slide>
            </Swiper>
            <!-- 关闭按钮 -->
            <div class="closeBox">
                <div @click="Close">关闭按钮</div>
                <div>{{ carouselIndex + 1 }}/{{ props.swiperList.length }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, watch, nextTick } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Autoplay, Navigation, A11y } from 'swiper'// 分页器
// import 'swiper/css'
interface PropsType {
    swiperList?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    swiperList: []
})
interface EmitType {
    (e: 'CloseDialog'): void
}
const emit = defineEmits<EmitType>()
const Close = () => {
    emit('CloseDialog')
}
const modules = [Autoplay, Navigation, A11y]
const carouselIndex = ref<number>(0)
const SwiperRef = ref<any>(null)
const handleSlideChange = (swiper: any) => {
    carouselIndex.value = swiper.realIndex
}
onMounted(async () => {
})
</script>
<style lang="scss" scoped>
.swiperModify {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    .swiperBox {
        position: relative;
        width: 1520px;
        margin: 0 auto;

        .swiper-container {
            width: 100%;
            height: 582px;
        }

        :deep(.swiper-slide) {
            width: 1000px;
            height: 582px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            transform: scale(0.8);

            img {
                width: 100%;
                height: 582px;
                display: inline-block;
                object-fit: cover;
            }
        }

        :deep(.swiper-slide-active) {
            transform: scale(1);
            z-index: 999999;
        }
    }

    .closeBox {
        width: 1000px;
        color: #ffffff;
        margin: 40px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: 24px;

        div:first-of-type {
            padding: 15px 42px;
            border-radius: 33px;
            border: 1px solid #FFFFFF;
            cursor: pointer;

        }

        div:last-of-type {
            position: absolute;
            right: 0px;
        }
    }
}
</style>
